import {Image, StyleSheet, Platform, View, Text, Pressable, TouchableOpacity} from 'react-native';

import {HelloWave} from '@/components/HelloWave';
import PageScrollView from '@/components/PageScrollView';
import {ThemedText} from '@/components/ThemedText';
import {FcView} from '@/components/FcView';
import {FcText} from '@/components/FcText';
import {ThemedView} from '@/components/ThemedView';
import Test from "@/components/test/Test";
import React, {useEffect, useState} from "react";
import {router} from "expo-router";
import IndexBanner from "@/components/index/IndexBanner";
import { LinearGradient } from 'expo-linear-gradient';
import MenuList from "@/components/index/MenuList";
import {Flex} from "@ant-design/react-native";
import PageTopDeliver from "@/components/PageTopDeliver";
import FormTitle from "@/components/FormTitle";
import ContentList from "@/components/index/ContentList";
import {useGetListQuery} from "@/store/api/contentManage/contentManageApi";

export default function HomeScreen() {
    const [bannerList, SetBannerList] = useState([
        {
            id: 1,
            title: 'banner1',
            // url: '@/assets/images/index/banner.png'
            url: 'https://img1.baidu.com/it/u=933701016,691551669&fm=253&fmt=auto?w=889&h=500'
        }, {
            id: 2,
            title: 'banner2',
            // url: '@/assets/images/index/banner.png'
            url: 'https://img0.baidu.com/it/u=1451478211,3670506687&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
        }, {
            id: 3,
            title: 'banner3',
            // url: '@/assets/images/index/banner.png'
            url: 'https://img2.baidu.com/it/u=3086056945,4167288839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
        }
    ])

    return (
        <PageScrollView
            // headerBackgroundColor={{light: '#FFFFFF', dark: '#1D3D47'}}
            // headerImage={
            //   <Image
            //     source={require('@/assets/images/partial-react-logo.png')}
            //     style={styles.reactLogo}
            //   />
            // }
            isHaveHeader
            isTransparentTab
            pageTab={
                <PageTopDeliver />
            }
        >

            {/*<IndexBanner list={bannerList}/>*/}


            <FcView style={styles.card_wrap}>
                <View style={styles.card_item}>
                    <TouchableOpacity onPress={() => router.push('/contentManage')}>
                        <FcText style={styles.card_name}>内容管理</FcText>
                        <FcText style={styles.card_hint}>高效管理AI文案</FcText>
                    </TouchableOpacity>
                    <Image style={{width: 56,height: 56}} resizeMode={"contain"} source={require('@/assets/images/index/rn_icon.png')}></Image>
                </View>
                <View style={[styles.card_item,styles.card_item_right]}>
                    <TouchableOpacity onPress={() => router.push('/questionsAndAnswers')}>
                        <FcText style={styles.card_name}>通用问答</FcText>
                        <FcText style={styles.card_hint}>全方位智能解答</FcText>
                    </TouchableOpacity>
                    <Image style={{width: 56,height: 56}} resizeMode={"contain"} source={require('@/assets/images/index/wd_icon.png')}></Image>
                </View>
            </FcView>

            <MenuList />

            {/*<ThemedView style={styles.titleContainer}>*/}
            {/*    <ThemedText type="title">Welcome!</ThemedText>*/}
            {/*    <HelloWave/>*/}
            {/*</ThemedView>*/}
            <FormTitle title='我的创作内容' isLeftIcon right={
                <TouchableOpacity style={{flexDirection: 'row',alignItems:'center'}} onPress={() => router.push('/contentManage')}>
                    <Text style={{color: 'rgba(0, 0, 0, 0.3)'}}>全部</Text>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.3)'}}>&#xe609;</Text>
                </TouchableOpacity>}/>

            <ContentList />
        </PageScrollView>
    );
}

const styles = StyleSheet.create({
    gwIcon: {
        width: 24,
        height: 24,
    },
    gwTxt: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.9)'
    },
    topRight: {
        flexDirection: 'row',
        alignItems: "center"
    },
    syh: {
        width: 24,
        height: 24,
        marginRight: 16
    },
    tx: {
        width: 32,
        height: 32,
        borderRadius: 50
    },
    card_wrap: {
        flexDirection: 'row',
        marginTop: 4,
    },
    card_item: {
        flex: 1,
        height: 80,
        borderRadius: 8,
        flexDirection: "row",
        justifyContent: 'space-between',
        alignItems: "center",
        paddingRight: 7,
        paddingLeft: 16,
        backgroundColor: '#FFFFFF',
    },
    card_item_right: {
      marginLeft: 7
    },
    card_name: {
        fontSize: 15,
        fontWeight: 500,
        lineHeight: 24,
        color: 'rgba(0, 0, 0, 0.9)',
    },
    card_hint: {
        fontSize: 12,
        lineHeight: 18,
        color: 'rgba(0, 0, 0, 0.5)',
        marginTop: 2,
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    stepContainer: {
        gap: 8,
        marginBottom: 8,
    },
    reactLogo: {
        height: 178,
        width: 290,
        bottom: 0,
        left: 0,
        position: 'absolute',
    }
});
